<template>
  <div>
    <h1>Playground</h1>
    <!--
      姓名
        非空
      年龄
        非空

      el-form
        :model :rules
      el-form-item
        prop
      input
        v-model
     -->
    <el-form :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    /**
     * 要用箭头函数，这样this的指向才是我们的实例
     * 不用箭头函数，就拿不到对应data的数据，this的指向是rule
     * 参数字段说明
     * rule - 用的不多，他表示我们校验哪个字段，字段信息类型之类
     * value - 用户输入的内容
     * 自定义校验 callback -  必须被调用。 更多高级用法可参考 async-validator。
     *    不管校验成功还是失败 都要调用
     *    如果失败 - callback(new Error('错误信息'))
     *    如果成功 - callback() - 相当与校验成功
     *    如果成功 - callback() - 相当于校验成功
     *
     */
    const validateAge = (rule, value, callback) => {
      // console.log({ rule, value, callback })
      // console.log(this===rule) //true

      /**
       * 所有的都应该是数字字符串
       * 第一位不能为0 第一位1-9
       * 整个数字字符串 1到3位 因为前面1-9占了一位数字  后面输入的数字应该是0-2位
       */
      if (/^[1-9]\d{0,2}$/.test(value) && value <= 100) {
        callback()
      } else {
        callback(new Error('年龄为1-100岁'))
      }
    }

    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: ['change', 'blur'] },
          { validator: validateAge, trigger: ['change', 'blur'] }
        ]
      }
    }
  }
}
</script>

<style>

</style>
